<template>
  <div class="app-container">
    <manage-sidebar>
      <el-tabs active-name="publish" class="myDes" @tab-click="handleClick">

        <el-tab-pane label="已发布" name="publish">

          <el-form :inline="true" :model="article.articleQuery" class="demo-form-inline" size="small">
            <el-form-item>
              <el-select v-model="article.articleQuery.tagID" filterable clearable placeholder="文章标签">
                <el-option v-for="tag in article.tags" :key="tag.id" :value="tag.id" :label="tag.name"/>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="article.articleQuery.channelID" filterable clearable placeholder="分类专栏">
                <el-option
                  v-for="channel in article.channels"
                  :key="channel.id"
                  :value="channel.id"
                  :label="channel.name"/>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input v-model="article.articleQuery.title" placeholder="请输入关键字"/>
            </el-form-item>
            <el-form-item>
              <el-button :disabled="article.btnDisable" type="primary" plain @click="getArticleData">搜索</el-button>
            </el-form-item>
          </el-form>

          <div v-for="article in this.article.list" :key="article.id">
            <el-descriptions :column="2" :colon="false" border>
              <el-descriptions-item>
                <span style="font-size: large">
                  <router-link :to="'/blog/details/' + article.id" target="_blank" class="inlineBlock myArticle">
                    {{ article.title }}
                  </router-link>
                </span>
              </el-descriptions-item>
              <el-descriptions-item content-class-name="my-content">
                <span style="font-size: small; color: #999999" v-text="article.publishTime"/>
              </el-descriptions-item>
              <el-descriptions-item><span style="font-size: small; color: #a69aaa">
                阅读 {{ article.viewCount }} · 评论 {{ article.commentCount }} · 收藏 {{ article.collectCount }}
              </span>
              </el-descriptions-item>
              <el-descriptions-item>
                <el-button type="text" style="color: black">查看数据</el-button>
                <el-button type="text" style="color: black">
                  <router-link :to="'/blog/edit/' + article.id" target="_blank" class="inlineBlock">
                    编辑
                  </router-link>
                </el-button>
                <el-button type="text" style="color: black" @click="deleteArticle(article.id)">
                  删除
                </el-button>
              </el-descriptions-item>
            </el-descriptions>
            <el-divider/>
          </div>

          <el-pagination
            :current-page="article.page"
            :page-sizes="[5, 10, 15, 30, 50, 100]"
            :page-size="article.pageSize"
            :total="article.total"
            style="padding: 30px 0; text-align: center;"
            layout="sizes, prev, pager, next, jumper, ->, total, slot"
            @size-change="changSize0"
            @current-change="changePage0"/>
        </el-tab-pane>

        <el-tab-pane label="草稿" name="draft">

          <div v-for="draft in this.draft.list" :key="draft.id">
            <el-descriptions :column="2" :colon="false" border>
              <el-descriptions-item>
                <span style="font-size: large">
                  {{ draft.title }}
                </span>
              </el-descriptions-item>
              <el-descriptions-item content-class-name="my-content">
                <span style="font-size: small; color: #999999" v-text="draft.publishTime"/>
              </el-descriptions-item>
              <el-descriptions-item><span style="font-size: small; color: #a69aaa">
                阅读 {{ draft.viewCount }} · 评论 {{ draft.commentCount }} · 收藏 {{ draft.collectCount }}
              </span>
              </el-descriptions-item>
              <el-descriptions-item>
                <el-button type="text" style="color: black">
                  <router-link :to="'/blog/edit/' + draft.id" target="_blank" class="inlineBlock">
                    编辑
                  </router-link>
                </el-button>
                <el-button type="text" style="color: black" @click="deleteDraft(draft.id)">
                  删除
                </el-button>
              </el-descriptions-item>
            </el-descriptions>
            <el-divider/>
          </div>

          <el-pagination
            :current-page="draft.page"
            :page-sizes="[5, 10, 15, 30, 50, 100]"
            :page-size="draft.pageSize"
            :total="draft.total"
            style="padding: 30px 0; text-align: center;"
            layout="sizes, prev, pager, next, jumper, ->, total, slot"
            @size-change="changSize1"
            @current-change="changePage1"/>

        </el-tab-pane>

        <el-tab-pane label="回收站" name="recycle">

          <div v-for="recycle in this.recycle.list" :key="recycle.id">
            <el-descriptions :column="2" :colon="false" border>
              <el-descriptions-item>
                <span style="font-size: large">
                  {{ recycle.title }}
                </span>
              </el-descriptions-item>
              <el-descriptions-item content-class-name="my-content">
                <span style="font-size: small; color: #999999" v-text="recycle.publishTime"/>
              </el-descriptions-item>
              <el-descriptions-item><span style="font-size: small; color: #a69aaa">
                阅读 {{ recycle.viewCount }} · 评论 {{ recycle.commentCount }} · 收藏 {{ recycle.collectCount }}
              </span>
              </el-descriptions-item>
              <el-descriptions-item>
                <el-button type="text" style="color: black" @click="recycleDraft(recycle.id)">
                  恢复至草稿
                </el-button>
                <el-button type="text" style="color: black" @click="deleteRecycle(recycle.id)">
                  彻底删除
                </el-button>
              </el-descriptions-item>
            </el-descriptions>
            <el-divider/>
          </div>

          <el-pagination
            :current-page="recycle.page"
            :page-sizes="[5, 10, 15, 30, 50, 100]"
            :page-size="recycle.pageSize"
            :total="recycle.total"
            style="padding: 30px 0; text-align: center;"
            layout="sizes, prev, pager, next, jumper, ->, total, slot"
            @size-change="changSize2"
            @current-change="changePage2"/>

        </el-tab-pane>
      </el-tabs>
    </manage-sidebar>
  </div>
</template>

<script>

import ManageSidebar from '@/components/ManageSidebar'

import articleAPI from '@/api/cms/article'
import tagAPI from '@/api/cms/tag'
import channelAPI from '@/api/cms/channel'

export default {
  name: 'Manage',
  components: { ManageSidebar },

  data() {
    return {
      article: {
        tags: null,
        channels: null,
        list: null,
        page: 1,
        total: 0,
        pageSize: 10,
        articleQuery: {
          page: 1,
          limit: 10,
          tagID: null,
          channelID: null,
          title: null,
          status: 1
        },
        btnDisable: false
      },
      draft: {
        list: null,
        page: 1,
        total: 0,
        pageSize: 10,
        draftQuery: {
          page: 1,
          limit: 10,
          status: 0
        }
      },
      recycle: {
        list: null,
        page: 1,
        total: 0,
        pageSize: 10,
        recycleQuery: {
          page: 1,
          limit: 10,
          status: 2
        }
      }
    }
  },

  created() {
    this.getArticleData()
    this.getTags()
    this.getChannels()
  },

  methods: {

    getArticleData() {
      this.article.btnDisable = true
      this.article.articleQuery.page = this.page
      this.article.articleQuery.limit = this.pageSize
      articleAPI.getArticleList(this.article.articleQuery).then(res => {
        this.article.total = Number.parseInt(res.result.counts)
        this.article.list = res.result.items
        this.article.btnDisable = false
      }).catch(error => {
        this.article.btnDisable = false
        console.log(error)
      })
    },

    getTags() {
      tagAPI.getAllTags().then(res => {
        this.article.tags = res.result
      }).catch(error => {
        console.log(error)
      })
    },

    getChannels() {
      channelAPI.getAllChannels().then(res => {
        this.article.channels = res.result
      }).catch(error => {
        console.log(error)
      })
    },

    changSize0(pageSize) {
      this.article.pageSize = pageSize
      this.article.page = 1
      this.getArticleData()
    },

    changePage0(page) {
      this.article.page = page
      this.getArticleData()
    },

    deleteArticle(articleID) {
      articleAPI.deleteArticle(articleID).then(res => {
        this.$message({
          type: 'success',
          message: res.result
        })
        this.getArticleData()
      }).catch(error => {
        console.log(error)
      })
    },

    getDraftData() {
      this.draft.draftQuery.page = this.page
      this.draft.draftQuery.limit = this.pageSize
      articleAPI.getArticleList(this.draft.draftQuery).then(res => {
        this.draft.total = Number.parseInt(res.result.counts)
        this.draft.list = res.result.items
      }).catch(error => {
        console.log(error)
      })
    },

    changSize1(pageSize) {
      this.draft.pageSize = pageSize
      this.draft.page = 1
      this.getDraftData()
    },

    changePage1(page) {
      this.draft.page = page
      this.getDraftData()
    },

    deleteDraft(draftID) {
      articleAPI.deleteArticle(draftID).then(res => {
        this.$message({
          type: 'success',
          message: res.result
        })
        this.getDraftData()
      }).catch(error => {
        console.log(error)
      })
    },

    getRecycleData() {
      this.recycle.recycleQuery.page = this.page
      this.recycle.recycleQuery.limit = this.pageSize
      articleAPI.getArticleList(this.recycle.recycleQuery).then(res => {
        this.recycle.total = Number.parseInt(res.result.counts)
        this.recycle.list = res.result.items
      }).catch(error => {
        console.log(error)
      })
    },

    changSize2(pageSize) {
      this.recycle.pageSize = pageSize
      this.recycle.page = 1
      this.getRecycleData()
    },

    changePage2(page) {
      this.recycle.page = page
      this.getRecycleData()
    },

    deleteRecycle(id) {
      articleAPI.deleteArticle(id).then(res => {
        this.$message({
          type: 'success',
          message: res.result
        })
        this.getRecycleData()
      }).catch(error => {
        console.log(error)
      })
    },

    recycleDraft(id) {
      articleAPI.recycle(id).then(res => {
        this.$message({
          type: 'success',
          message: res.result
        })
        this.getRecycleData()
      }).catch(error => {
        console.log(error)
      })
    },

    handleClick(tab, event) {
      if (tab.index === '0') {
        this.getArticleData()
      } else if (tab.index === '1') {
        this.getDraftData()
      } else {
        this.getRecycleData()
      }
    }
  }
}
</script>

<style>

.myDes .el-descriptions :not(.is-bordered) .el-descriptions-item__cell {
  padding-bottom: 0;
}

.myDes .el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
  line-height: 3;
}

.myDes .el-divider--horizontal {
  margin: 0;
}

.myDes .el-descriptions-item__label.is-bordered-label {
  background: #ffffff;
}

.myDes .el-descriptions .is-bordered .el-descriptions-item__cell {
  border: 0;
}

.myDes .my-content {
  width: 20%;
}

.myDes th {
  width: 0px;
}

.myDes .myArticle:hover {
  color: rgb(64, 158, 255);
}
</style>
